<breadcrumb></breadcrumb>

<mat-card>
  <mat-card-content>
    <section>
      <h2>Checkbox without label</h2>
      <mat-checkbox aria-label="A single checkbox with no label example"></mat-checkbox>
    </section>
    <section>
      <h2>Standalone checkbox</h2>
      <div>
        <mat-checkbox>Yes, I agree to the terms and conditions</mat-checkbox>
      </div>
      <div>
        <mat-checkbox [disabled]="true">No, I do not agree to the terms and
          conditions</mat-checkbox>
      </div>
      <div>
        <mat-checkbox [indeterminate]="true">A partially done task</mat-checkbox>
      </div>
    </section>

    <section>
      <h2>Nested checklist</h2>
      <div *ngFor="let task of tasks">
        <mat-checkbox [(ngModel)]="task.completed"
                      [checked]="allComplete(task)"
                      [indeterminate]="someComplete(task.subtasks!)"
                      (change)="setAllCompleted(task.subtasks!, $event.checked)">
          {{task.name}}
        </mat-checkbox>
        <div class="demo-sub-list">
          <div *ngFor="let subtask of task.subtasks">
            <mat-checkbox [(ngModel)]="subtask.completed">
              {{subtask.name}}
            </mat-checkbox>
          </div>
        </div>
      </div>
    </section>

    <section>
      <h2>Colored checkboxes</h2>
      <mat-checkbox color="primary">Primary</mat-checkbox>
      <mat-checkbox color="accent">Accent</mat-checkbox>
      <mat-checkbox color="warn">Warn</mat-checkbox>
    </section>
  </mat-card-content>
</mat-card>
